<template>
	<!--新增配置-->
	<j-modal :title="title" :width="width" :visible="visible" switchFullscreen @ok="handleOk"
		:okButtonProps="{ class:{'jee-hidden': disableSubmit} }" @cancel="handleCancel" cancelText="关闭" okText="确定">
		<!--表单-->
		<a-spin :spinning="confirmLoading">
			<j-form-container class="scroll-view" style="height: 400px">
				<a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
					<a-row>
						<a-col :span="24">
							<a-form-model-item label="评分类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="type">
								<j-dict-select-tag :disabled="disableSubmit" placeholder="请选择评分类型" v-model="model.type"
									dictCode="score_type"></j-dict-select-tag>
							</a-form-model-item>
						</a-col>
						<a-col :span="24">
							<a-form-model-item label="分类内容" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name">
								<a-input :disabled="disableSubmit" v-model="model.name" placeholder="请输入分类内容"
									style="width: 100%;"></a-input>
							</a-form-model-item>
						</a-col>

						<a-col :span="24">
							<a-form-model-item label="加减类型" :labelCol="labelCol" :wrapperCol="wrapperCol"
								prop="plusminusType">
								<a-select :disabled="disableSubmit" placeholder="请选择加减类型" :value="model.plusminusName"
									@change="handleChange('plusminusName',$event)">
									<a-select-option v-for="(item,index) in plusminusList" :key="index"
										:value="item">
										{{item.label}}
									</a-select-option>
								</a-select>
							</a-form-model-item>
						</a-col>

						<a-col :span="24">
							<a-form-model-item label="分数配置" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="score">
								<div style="display: flex;align-items: center;">
									<a-input :disabled="disableSubmit" v-model="model.score" placeholder="请输入分数配置"
										style="width: calc(100% - 40px);"></a-input>
									<div style="width: 40px;text-align: center;">分</div>
								</div>
							</a-form-model-item>
						</a-col>
					</a-row>
				</a-form-model>
			</j-form-container>
		</a-spin>
	</j-modal>
</template>

<script>
	import {
		httpAction,
		getAction,
		postAction
	} from '@/api/manage'
	export default {
		name: 'WtDevicetypeModal',
		components: {

		},
		data() {
			return {
				title: '',
				width: 800,
				visible: false,
				disableSubmit: false,
				//表单
				confirmLoading: false,
				labelCol: {
					xs: {
						span: 24
					},
					sm: {
						span: 5
					}
				},
				wrapperCol: {
					xs: {
						span: 24
					},
					sm: {
						span: 16
					}
				},
				labelCol2: {
					xs: {
						span: 24
					},
					sm: {
						span: 2
					}
				},
				wrapperCol2: {
					xs: {
						span: 24
					},
					sm: {
						span: 22
					}
				},
				validatorRules: {},
				model: {
					type: '',
					name: '',
					plusminusType: '',
					plusminusName:'',
					score: '',
				},
				levelOneOptions: [],
				plusminusList: [{
					label: '加分',
					value: '1'
				}, {
					label: '减分',
					value: '2'
				}],
				pageType: '',
				url: {
					add: '/score/wtScoreConfiguration/add',
					edit: '/score/wtScoreConfiguration/edit',
					list: '',
					detail: '',
					delete: '',
				},
			}
		},
		created() {
			this.Dictionary();
		},
		methods: {
			//下拉选择
			handleChange(type, item, index) {
				console.log(1, type, item, index);
				let _self = this;
				if (type === 'plusminusName') {
					this.model.plusminusName = item.label;
					this.model.plusminusType = item.value;
				}
				this.$forceUpdate();
			},
			//获取数据字典列表
			Dictionary() {
				var _self = this;

			},
			add(type, record) {
				this.visible = true;
				this.pageType = type;
			},
			edit(type,record) {
				this.visible = true;
				this.pageType = type;
				this.model = record;
				if(this.plusminusList && this.plusminusList.length>0){
					let info = this.plusminusList.find((item) => item.value == this.model.plusminusType);
					this.model.plusminusName = info.label;
				}
			},
			close() {
				this.$emit('close');
				this.visible = false;
			},
			init(){
				this.model = {
					type: '',
					name: '',
					plusminusType: '',
					plusminusName:'',
					score: '',
				}
			},
			handleOk() {
				const _self = this
				let params = {};
				let httpurl = ''
				if (_self.pageType === 'add') {
					httpurl = _self.url.add;
					params = _self.model;
				} else if (_self.pageType === 'edit') {
					httpurl = _self.url.edit;
					params = _self.model;
				}
				// 触发表单验证
				_self.confirmLoading = true;
				console.log('提交表单', params)
				// debugger
				httpAction(httpurl, params, 'POST')
					.then((res) => {
						if (res.success) {
							_self.$message.success(res.message);
							_self.close();
							_self.init();
							_self.$emit('ok');
						} else {
							_self.$message.warning(res.message)
						}
					})
					.finally(() => {
						_self.confirmLoading = false
					})
			},
			submitCallback() {
				this.$emit('ok');
				this.visible = false;
			},
			handleCancel() {
				this.close()
			}
		}
	}
</script>
<style scoped>
	.scroll-view {
		overflow: auto;
		overflow-y: scroll;
	}
</style>